<template>
  <div style="padding: 0px 40px 0 40px">
    <ElRow v-if="defaultViewPage == 'default'">
      <ElCol
        :span="24"
        v-loading="loading"
        element-loading-text="Loading..."
        element-loading-background="rgba(122, 122, 122, 0)">
        <ElRow :gutter="20">
          <!-- 物资库相关 -->
          <ElCol :span="6" :xs="24" class="border">
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>物资库相关</span></div>
              <div style="flex: 1">
                <LiquidfillSmall
                  v-if="materialProductData"
                  viewFormat="num"
                  :value="materialProductData.totalAmount"
                  title="物资库总金额" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>入库金额与数量</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="materialProductData && materialProductData.intoStatistics"
                  :option="mixingWarehouseBi(materialProductData.intoStatistics, '入库统计')" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>出库金额与数量</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="materialProductData && materialProductData.outStatistics"
                  :option="mixingWarehouseBi(materialProductData.outStatistics, '出库统计')" />
              </div>
            </div>
          </ElCol>
          <!-- 半成品库相关 -->
          <ElCol :span="6" :xs="24" class="border">
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>半成品库相关</span></div>
              <div style="flex: 1">
                <LiquidfillSmall
                  v-if="semiProductData"
                  viewFormat="num"
                  :value="semiProductData.total"
                  title="半成品库总数量" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>暂存转入转出</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="semiProductData && semiProductData.intoNumStatistics"
                  :option="mixingWarehouseBi3(semiProductData.intoNumStatistics, '半成品统计')" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>各产品暂存数量</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="semiProductData && semiProductData.lineBar"
                  :option="barLineChart(semiProductData.lineBar, '各产品在库数量')" />
              </div>
            </div>
          </ElCol>
          <!-- 成品库相关 -->
          <ElCol :span="6" :xs="24" class="border">
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>成品库相关</span></div>
              <div style="flex: 1">
                <LiquidfillSmall
                  v-if="finishProductData"
                  viewFormat="num"
                  :value="finishProductData.total"
                  title="半成品库总数量" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>暂存转入转出</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="finishProductData && finishProductData.intoNumStatistics"
                  :option="mixingWarehouseBi3(finishProductData.intoNumStatistics, '成品库统计')" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>各产品暂存数量</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="finishProductData && finishProductData.lineBar"
                  :option="barLineChart(finishProductData.lineBar, '各产品在库数量')" />
              </div>
            </div>
          </ElCol>
          <!-- 废品库相关 -->
          <ElCol :span="6" :xs="24" class="border">
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>废品库相关</span></div>
              <div style="flex: 1">
                <LiquidfillSmall
                  v-if="wasteProductData"
                  viewFormat="num"
                  :value="wasteProductData.total"
                  title="半成品库总数量" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>暂存转入转出</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="wasteProductData && wasteProductData.intoNumStatistics"
                  :option="mixingWarehouseBi3(wasteProductData.intoNumStatistics, '废品库统计')" />
              </div>
            </div>
            <div class="data-screen-card" :style="{ height: rightCardHeight1 }">
              <div class="card-title"><span>各产品暂存数量</span></div>
              <div class="card-content">
                <BiBaseChart
                  v-if="wasteProductData && wasteProductData.lineBar"
                  :option="barLineChart(wasteProductData.lineBar, '各产品在库数量')" />
              </div>
            </div>
          </ElCol>
        </ElRow>
      </ElCol>
      <!-- 下一页 -->
      <div class="next" @click="handleNext()">
        <span>下一页</span>
      </div>
    </ElRow>
    <!-- 仓库详情 -->
    <WarehouseDetail
      ref="warehouseDetailRef"
      v-if="defaultViewPage == 'warehouseDetail'"
      :type="type"
      :timeRange="timeRange" />
  </div>
</template>
<!-- 仓库看板 -->
<script setup lang="ts">
import { ElCol } from 'element-plus';
import { ref } from 'vue';
import { mixingWarehouseBi, mixingWarehouseBi3, barLineChart } from './components/echarts';
import WarehouseDetail from './components/WarehouseDetail.vue';
import {
  getFinishProductStatistics,
  getMaterialProductStatistics,
  getSemiProductStatistics,
  getWasteProductStatistics,
} from '../api/warehouseBi';

defineOptions({
  name: 'Device',
});

const props = defineProps({
  type: {
    type: Number,
    default: 2, //统计类型:1-代表本周;2-代表本月;3-代表本年;4-代表自定义时间
  },
  timeRange: {
    type: Object,
    default: {
      startTime: '',
      endTime: '',
    }, //时间区间
  },
});

const rightCardHeight1 = ref<any>('calc((var(--vh, 1vh) * 100 - 205px) / 3)');

const loading = ref(true);

// 物资库统计
const materialProductData = ref<any>(null);
// 半成品库统计
const semiProductData = ref<any>(null);
// 成品库统计
const finishProductData = ref<any>(null);
// 成品库统计
const wasteProductData = ref<any>(null);

const warehouseDetailRef = ref();

const defaultViewPage = ref('default'); // 是否默认

// 获取页面数据
const getPageData = async (isNavSwitch = false) => {
  // 切换看板模块
  if (isNavSwitch) defaultViewPage.value = 'default';
  // 当前组件为 仓库详情
  if (defaultViewPage.value == 'warehouseDetail') return warehouseDetailRef.value.getPageData();

  loading.value = true;

  try {
    let request1 = getMaterialProductStatistics({
      type: props.type,
      ...props.timeRange,
    });
    let request2 = getSemiProductStatistics({
      type: props.type,
      ...props.timeRange,
    });
    let request3 = getFinishProductStatistics({
      type: props.type,
      ...props.timeRange,
    });
    let request4 = getWasteProductStatistics({
      type: props.type,
      ...props.timeRange,
    });

    Promise.all([request1, request2, request3, request4]).then((_res) => {
      let res1 = _res[0];
      let res2 = _res[1];
      let res3 = _res[2];
      let res4 = _res[3];

      materialProductData.value = {
        ...res1.data,
        totalAmount: res1.data.totalAmount.toFixed(2),
      };
      semiProductData.value = {
        ...res2.data,
        lineBar: res2.data.holdNumList.map((item: any) => {
          return {
            value: item.holdTotal,
            label: item.itemName,
          };
        }),
      };
      finishProductData.value = {
        ...res3.data,
        lineBar: res3.data.holdNumList.map((item: any) => {
          return {
            value: item.holdTotal,
            label: item.itemName,
          };
        }),
      };
      wasteProductData.value = {
        ...res4.data,
        lineBar: res4.data.holdNumList.map((item: any) => {
          return {
            value: item.holdTotal,
            label: item.itemName,
          };
        }),
      };

      loading.value = false;
    });
  } catch (error) {}
};

// 下一页
const handleNext = () => {
  defaultViewPage.value = 'warehouseDetail';
};

defineExpose({
  getPageData,
});
</script>

<style lang="scss" scoped>
.data-screen-card {
  :deep() {
    .ElRow {
      height: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.border {
  border-right: 2px solid #aaaaaa;
}

.next {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 40px;
  position: fixed;
  top: 0px;
  right: 10px;
  span {
    display: inline-block;
    width: 50px;
    height: 200px;
    background: #0f0c29; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #24243e,
      #302b63,
      #0f0c29
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    writing-mode: vertical-rl;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

.data-screen-card {
  width: 100%;
  min-height: 160px;
  margin-bottom: 20px;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(195, 211, 222, 0.501960784313725);
  background: #011320;

  display: flex;
  flex-direction: column;

  .card-title {
    padding: 16px;
    padding-bottom: 0px;

    span {
      display: inline-block;
      text-align: left;
      height: 20px;
      padding-left: 10px;
      line-height: 20px;
      text-align: left;
      border-left: 3px solid #01ffff;
      width: 140px;
      white-space: nowrap;
      /* 确保文本在一行内显示 */
      overflow: hidden;
      /* 隐藏溢出的内容 */
      text-overflow: ellipsis;
      /* 使用省略号表示文本溢出 */
    }
  }

  .card-content {
    flex: 1;
    /* 占满剩余空间 */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .card-yq {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .card-scroll {
    overflow: hidden;
    flex: 1;
  }

  .grid-title {
    text-align: center;
  }

  &::before {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 30px;
    z-index: 0;
    width: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-top: 3px solid #101f58;
    border-bottom: 3px solid #101f58;
  }

  &::after {
    position: absolute;
    top: 30px;
    right: -3px;
    left: -3px;
    z-index: 0;
    height: calc(100% - 60px);
    pointer-events: none;
    content: '';
    border-right: 3px solid #101f58;
    border-left: 3px solid #101f58;
  }
}
</style>
